<template>
	<div>
		<el-dialog title="建设目标" :visible.sync="dialogVisible" width="60%">

			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="年度">
					<el-date-picker v-model="form.year" type="year" placeholder="选择年" format="yyyy" value-format="yyyy">
					</el-date-picker>
				</el-form-item>
				<el-form-item v-for="(item,index) in form.contentList" :key="index" :label="'目标'+(index+1)">
					<div class="displayFlex">
						<el-input v-model="form.contentList[index]" placeholder="目标"></el-input>
						<i class="el-icon-remove-outline ml10" @click="form.contentList.splice(index,1)"
							style="color: brown;"></i>
						<i class="el-icon-circle-plus-outline ml10" @click="form.contentList.push('')"
							style="color: blue;"></i>
					</div>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false,form = $options.data().form">取 消</el-button>
				<el-button type="primary" @click="confirmSave">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	let that
	export default {
		name: 'saveTarget',
		data() {
			return {
				form: {
					year: '',
					contentList: ['']
				},
				dialogVisible: false
			}
		},
		mounted() {
			that = this
		},
		methods: {
			open(item){
				that.dialogVisible = true
				if(item){
					that.form = item
				}else{
					that.form = that.$options.data().form
				}
			},
			
			confirmSave() {
				this.$confirm('是否确认保存', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/gov/carbon/target/save',
						data: JSON.stringify(that.form),
						contentType: 'application/json',
						success: function(result) {
							if(result.data) that.dialogVisible = false
							that.form = that.$options.data().form
						}
					})
				})

			},
		},
	}
</script>

<style scoped>

</style>